<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>瑞吉外卖管理端</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css" />
    <link rel="stylesheet" href="styles/common.css" />
    <link rel="stylesheet" href="styles/index.css" />
    <link rel="stylesheet" href="styles/icon/iconfont.css" />
    <style>
      .body{
        min-width: 1366px;
      }
      .app-main{
        height: calc(100% - 64px);
      }
      .app-main .divTmp{
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="app" id="app">
      <div class="app-wrapper openSidebar clearfix">
        <!-- sidebar -->
        <div class="sidebar-container">
          <div class="logo">
            <img src="images/img2.png" alt="" style="width: 117px; height: 32px" />
          </div>

          <el-scrollbar wrap-class="scrollbar-wrapper">
            <el-menu
              :default-active="defAct"
              :unique-opened="false"
              :collapse-transition="false"
              background-color="#343744"
              text-color="#bfcbd9"
              active-text-color="#f4f4f5"
            >
              <div v-for="item in menuList" :key="item.id">
                <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
                  <template slot="title">
                    <i class="iconfont" :class="item.icon"></i>
                    <span>{{item.name}}</span>
                  </template>
                  <el-menu-item
                    v-for="sub in item.children"
                    :index="sub.id"
                    :key="sub.id"
                    @click="menuHandle(sub,false)"
                    >
                    <i :class="iconfont" :class="sub.icon"></i>
                    <span slot="title">{{sub.name}}</span>
                    </el-menu-item
                  >
                </el-submenu>
                <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
                  <i class="iconfont" :class="item.icon"></i>
                  <span slot="title">{{item.name}}</span>
                </el-menu-item>
              </div>
            </el-menu>
          </el-scrollbar>
        </div>
        <div class="main-container">
          <div class="app-main" v-loading="loading">
            <div class="divTmp" v-show="loading"></div>
            <iframe
                    id="cIframe"
                    class="c_iframe"
                    name="cIframe"
                    :src="iframeUrl"
                    width="100%"
                    height="auto"
                    frameborder="0"
                    v-show="!loading"
            ></iframe>
          </div>
        </div>

      </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="plugins/axios/axios.min.js"></script>
    <script>

      new Vue({
        el: '#app',
        data: {menuList: [
            {
              id: '2',
              name: '用户管理',
              url: 'tags.html',
              icon: 'icon-member'
            },
            {
              id: '3',
              name: '房源管理',
              url: 'readers.html',
              icon: 'icon-category'
            }
          ],
          defAct: '2',
          menuActived: '2',
          iframeUrl: 'UserList.html',
          headTitle: '管理界面',
          goBackFlag: false,
          loading: true,
          timer: null,


          errors:{},
          imgUrl:"/static/images/houseImg/",
          userName: "",
          pageSize: 10,
          UserActive : "1",
          UserInactive : "0",
          formLabelWidth: "100px",
          //表格数据
          tableData: { },
          // 弹框开关
          dialogFormVisible: false,
          // 弹框数据
          UserData: {},
        },
        created() {
          this.query(1);
          this.closeLoading();
        },
        methods: {
          menuHandle(item, goBackFlag) {
            this.loading = true
            this.menuActived = item.id
            this.iframeUrl = item.url
            this.headTitle = item.name
            this.goBackFlag = goBackFlag
            this.closeLoading()
          },
          closeLoading(){
            this.timer = null
            this.timer = setTimeout(()=>{
              this.loading = false
            },1000)
          },
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
          },
          handleAvatarSuccess(res, file) {
            if (res.code){
              this.imgUrl=this.imgUrl+res.data;
              this.UserData.image=this.imgUrl;
            }else {
              this.$alert(res.msg);
            }
          },
          beforeAvatarUpload(file) {
            const isJPG = file.type.indexOf('image')==0;
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
              this.$message.error('上传头像图片只能图片格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
          },
          query(page) {
            axios.get("/TN-USER/user/list", {
              params: {
                userName: this.userName,
                status: this.status,
                currentPage: page, //当前页数
                pageSize: this.pageSize //每页显示条目个数
              }
            }).then(res => {
              this.tableData = res.data;
              this.tableData.page = page;
              this.count=res.data.data.countId;
            })
          },

          sizeChange(page) {
            this.pageSize = page;
            this.query(1);
          },
          create() {
            this.UserData = {id: "", userName: "", phone: "", mail: "", idNumber: "", address: "", role: "",reputation : ""};
            this.dialogFormVisible = true;
          },
          // 修改
          modify(data) {
            this.create();
            for (let i in data) {
              this.UserData[i] = data[i];
            }
            this.dialogFormVisible = true;
          },


          // 添加
          saveUser() {
            axios.post("/TN-USER/user/save", this.UserData).then(res => {
              if (res.data.code == 1) {
                this.$message(res.data.msg);
                this.query(1); // 刷新表格
                this.dialogFormVisible = false; // 关闭弹窗
              }else {
                this.errors={};
                for (var name in this.UserData){
                  var  errMsg=res.data.data.filter(err=> err.field==name)
                          .map(err=>err.defaultMessage).join(",");
                  this.errors[name]=errMsg;
                }
              }
            })
          },
          resetInput() {
            this.userName = "";
          },
          //物理删除
          remove(data){
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
              type: 'warning'
            }).then(() => {
              axios.get("/TN-USER/user/delete",{
                params: {
                  id : data.id,
                  flag : "物理删除"
                }
              }).then(()=>{
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.query(1);
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          //逻辑删除
          changeStatus(data){
            axios.get("/TN-USER/user/delete",{
              params : {
                id : data.id,
                flag : "逻辑删除",
              }
            }).then(res=>{
              this.$message(res.data.msg);
            })
          }
        },
      })
    </script>
  </body>
</html>
